<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      box-sizing: border-box;
    }

    .box {
      width: 560px;
      height: 400px;
      background-color: pink;
    }

    img {
      width: 100%;
      height: 320px;
      display: block;
    }

    .bottom {
      height: 80px;
      background-color: green;
      padding: 10px 10px 0 10px;
    }

    .bottom p {
      margin: 0;
      color: white;
      margin-bottom: 10px;
    }

    .bottom-ul {
      width: 150px;
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
      justify-content: space-between;
      align-items: center;
    }

    .bottom-ul li {
      width: 8px;
      height: 8px;
      margin: 4px;
      border-radius: 50%;
      background: #fff;
      opacity: 0.4;
      cursor: pointer;
    }

<<<<<<< HEAD
    .bottom-ul .light {
      width: 12px;
      height: 12px;
      opacity: 2;
    }
    .left{
      width: 100px;
      float: right;
    }
    .right{
      width: 100px;
      float: left         ;
=======
    li.lihover {
      width: 12px;
      height: 12px;
      opacity: 1;
>>>>>>> e9fd295347a2cb24e7b1413cd9de33e610547a5a
    }
  </style>
</head>

<body>
  <div class="box">
    <img src="./相册.jpg/images/course01.png" alt="">
    <div class="bottom">
      <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
      <ul class="bottom-ul">
<<<<<<< HEAD
        <li class="light"></li>
=======
        <li></li>
>>>>>>> e9fd295347a2cb24e7b1413cd9de33e610547a5a
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
<<<<<<< HEAD
      <div class="biao">
        <button class="left">></button>
         <button class="right"><</button>
      </div>
=======
>>>>>>> e9fd295347a2cb24e7b1413cd9de33e610547a5a
    </div>
  </div>

  <script>

    const content = [
      { url: './相册.jpg/images/course01.png', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
<<<<<<< HEAD
      { url: './相册.jpg/images/course02.png', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
=======
      { url: '../相册.jpg/images/course02.png', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
>>>>>>> e9fd295347a2cb24e7b1413cd9de33e610547a5a
      { url: './相册.jpg/images/course03.png', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
      { url: './相册.jpg/images/course04.png', title: '快来分享你的寒假日常吧~', color: 'rgb(139, 98, 66)' },
      { url: './相册.jpg/images/course05.png', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(67, 90, 92)' },
      { url: './相册.jpg/images/course06.png', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: './相册.jpg/images/course07.png', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
      { url: './相册.jpg/images/course08.png', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
    ]
<<<<<<< HEAD
      
       const left=document.querySelector('.left')
       const right=document.querySelector('.right')
       const img=document.querySelector('img')
       const p=document.querySelector('p')
       const bottom=document.querySelector('.bottom')
       const slic=document.querySelectorAll('.bottom-ul li')
       let i=0
       left.addEventListener('click',function(){
        if(i===7){
          i=-1
        }
        i++
        console.log(i)
        img.src=content[i].url
        p.innerHTML=content[i].title
        bottom.style.backgroundColor=content[i].color
         for(let i=0;i<slic.length;i++){
        slic[i].classList.remove('light')

      }
      slic[i].classList.add('light')
       })
        right.addEventListener('click',function(){
        if(i===0){
          i=8
        }
        i--
        console.log(i)
        img.src=content[i].url
        p.innerHTML=content[i].title
        bottom.style.backgroundColor=content[i].color
         for(let i=0;i<slic.length;i++){
        slic[i].classList.remove('light')

      }
      slic[i].classList.add('light')
       })
      let t=0
      function time(){
       t=setInterval(function(){
        right.click()
       },1000)
      }

       const box=document.querySelector('.box')
       box.addEventListener('mouseenter',function(){
        console.log('移入')
        clearInterval(t)
       })
       box.addEventListener('mouseleave',function(){
        console.log('移出')
        time()
       })






 










   
=======
    let i=0
    const pic = document.querySelector('img')
    const p = document.querySelector('p')
        
    const bc = document.querySelector('.bottom')
    setInterval(function(){
        i++
        p.innerHTML=content[i].title
        img.src=content[i].url
        bc.style.backgroundColor=content[i].color


    },1000)
    


    
    
    
>>>>>>> e9fd295347a2cb24e7b1413cd9de33e610547a5a
  </script>

</body>

</html>